<template>
  <div class="detail" v-if="JSON.stringify(dataDetail) != '{}'">
    <!--  page_pos_style" :style="{ top: `${phoneStatusBarHeight}`} -->
    <!-- <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}"> -->
      <div :style="{ height: phoneStatusBarHeight }"></div>
      <navbar v-if="!showDownload" :title="title"></navbar>
      <!-- tab栏 -->
      <van-tabs scrollspy sticky @scroll="scollTop" ref="tabs" :offset-top="showDownload? 66:0">
        <van-tab v-for="(item,index) in tabs" :key="index" :title="item" name="index">
          <div v-if="index === 0" class="normal_margin">
            <swiper-box :star="star" :dataDetail='dataDetail' @func="addLikeId"></swiper-box>
          </div>
          <div v-if="index === 1" class="normal_margin">
            <infomation :dataDetail='dataDetail'></infomation>
          </div>
          <div v-if="index === 2" class="normal_margin">
            <store :dataDetail='dataDetail'></store>
          </div>
          <div v-if="index === 3">
            <div class="car_picture">
              <div class="title">车辆实拍</div>
              <div class="picture" v-for="(item,i) in dataDetail.usedCarPicCs_02" :key="i">
                <van-image
                  width="100%"
                  height="200px"
                  fit="cover"
                  lazy-load
                  :src="item.picUrl"
                  @click="showPhoto(item)"
                >
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </div>
            </div>
          </div>
        </van-tab>
        <!-- 弹出框 -->
          <!-- <van-popup
            v-model="show"
            closeable round
            position="bottom"
            :style="{ height: '50%' }"
          >
            <div class="popup_box" v-show="consultPopup">
              <div class="price_title">
                <div>询底价</div>
                <div>金牌顾问第一时间为您服务</div>
              </div>
              <div class="price_address">
                <div class="consult">
                  咨询门店
                </div>
                <div class="consult_address">
                  <div>门店店址</div>
                  <div>60.8km</div>
                </div>
              </div>
              <div class="user_name">
                <van-field v-model="userMsg.userName" label="称呼" placeholder="怎么称呼您" />
              </div>
              <div class="user_phone">
                <van-field v-model="userMsg.userPhone" label="手机号" placeholder="您的手机号" />
              </div>
              <div class="button_box">
                <button>立即咨询</button>
              </div>
            </div>
            <div class="finish_box" v-show="!consultPopup">
              <div class="icon_box">
                <van-icon name="checked" />
              </div>
              <div class="finish_content">
                <p>提交成功</p>
                <p>请保持手机畅通</p>
                <p>稍后会有专业顾问联系您</p>
              </div>
              <div class="button_box">
                <button>好的</button>
              </div>
            </div>
          </van-popup> -->
      </van-tabs>
      <!-- 没有更多了 -->
      <!-- <van-divider class="noMore" dashed>没有更多了</van-divider> -->
      <div class="noMore">---- 没有更多了----</div>
      <!-- 图片展示遮罩层 -->
      <div class="detail_overlar">
        <van-overlay :show="showOverLay" duration="0" z-index="100">
          <div class="close" :style="{'padding-top': phoneStatusBarHeight.replace(/px/,'')>0?phoneStatusBarHeight:'20px'}" ><van-icon name="cross" @click="closeOverlay"/></div>
          <div class="show_photo">
            <img :src="showPictureSrc" alt="">
          </div>
          <!-- <div class="phone" @click="consult">
            <span>电话咨询</span>
          </div> -->
        </van-overlay>
      </div>
      <!-- 顾问盒子 -->
      <!-- <div class="counselor">
        <div class="userimg">
          <img src="../../assets/image/moren.jpg" alt="">
        </div>
        <div class="userinfo">
          <p>东哥说车</p>
          <p>金牌顾问</p>
        </div>
        <div class="userbut">
          <button class="phone_but" @click="consult">电话咨询</button>
        </div>
      </div> -->
      <!-- 占位盒子 -->
      <!-- <div class="blank"></div> -->
      <!-- 下载车煮app -->
      <div class="download" v-if="showDownload">
        <div class="download_icon">
          <img src="../../assets/image/chezhu_app_logo.png" alt="">
        </div>
        <div class="download_content">
          <p>车煮APP</p>
          <p>下载你车煮APP查看更多内容</p>
        </div>
        <div class="download_but">
          <span @click="goToDownPage">下载APP</span>
        </div>
      </div>
    <!-- </div> -->
  </div>
</template>

<script>
import swiperBox from '../../components/secondHandCar/swiper.vue'
import infomation from '../../components/secondHandCar/infomation.vue'
import store from '../../components/secondHandCar/store.vue'
import { getDeatilMsg, addFoot, addLike, cancelLike, isLike } from './api'
export default {
  components: {
    swiperBox,
    infomation,
    store
  },
  data() {
    return {
      tabs: ['车辆','信息','门店','实拍'],
      img: "https://img01.yzcdn.cn/vant/cat.jpeg",
      show: false, // 弹出层
      showOverLay: false, // 图片预览遮罩层
      showDownload: false, // 下载吸顶栏
      userMsg:{
        userName: '',
        userPhone: ''
      },
      consultPopup: true,
      dataDetail: {}, // 从接口拿到详情信息
      showPictureSrc: '', // 展示的图片连接
      showShare: false,
      CarId: '6567f1c695b441258477ec03bb2dd613', // 二手车id
      star: false, // true是已收藏，false是未收藏
      // 获取屏幕状态栏高度
      phoneStatusBarHeight:'',
      // 吸顶高度计算
      phoneStatusBarHeightNew:'',
      title:"车辆详情"
    }
  },
  methods: {
    // 跳转到下载页面
    goToDownPage() {
      this.$router.push({
        name:'dowmLoadAPP'
      })
    },
    // 滑动显示tab
    scollTop(e) {
      let a = document.getElementsByClassName('van-tabs__wrap')
      if(e.scrollTop >= Number(!!this.phoneStatusBarHeight? this.phoneStatusBarHeight.split('px')[0]: 0)+Number(250)) {
        a[0].style.display="block"
        let setBorderTop = document.getElementsByClassName("van-tabs__wrap")
        setBorderTop[0].style.borderTop = `${phoneStatusBarHeight} solid #ffffff`
        this.$refs.tabs.resize();
      } else {
        a[0].style.display="none"
      }
    },
    // 显示弹窗
    showPopup(n) {
      console.log(n)
      this.show = n
    },
    // 遮罩层
    closeOverlay(){
      this.showOverLay = false
    },
    // 展示图片
    showPhoto(n) {
      this.showOverLay = true
      this.showPictureSrc = n.picUrl
    },
    // 电话咨询
    consult() {
      console.log('电话咨询')
    },
    // 判断是否在微信浏览器打开
    openInWX() {
      var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.showDownload = true
      }
    },
    // 获取详情信息 
    async getDetailData() {
      let id = this.$route.query.id || this.CarId
      // console.log(id)
      const {data} = await getDeatilMsg(id)
      // console.log('data1111111',data)
      // let a = data.initialRegistration.indexOf(' ')
      // console.log(a)
      data.initialRegistration = data.initialRegistration.slice(0, 7)
      data.usedCarPicCs_01 = data.usedCarPicCs.filter(item => item.type === '01')
      data.usedCarPicCs_02 = data.usedCarPicCs.filter(item => item.type === '02')
      this.dataDetail = data
      console.log(data)
    },
    // 用户登录后可以查看是否有收藏过该页面
    async isStarCar() {
      let id = this.$route.query.id
      const data = await isLike(id)
      this.star = data.data
      console.log(data)
    },
    // 添加足迹
    async addFootId() {
      let id = this.$route.query.id
      const data = await addFoot(id)
      console.log(data)
    },
    // 添加收藏和取消收藏
    async addLikeId() {
      let id = this.$route.query.id
      let token = window.sessionStorage.getItem('token')
      if (!token) {
        this.$toast('请先登录')
        return
      }
      if(this.star === false) {
        const data = await addLike(id)
        if (data.code === 0) {
          this.star = true
          return
        } else {
          this.$toast.message(data.code)
        }

      } else {
        const data = await cancelLike(id)
        if (data.code === 0) this.star = false
      }
      // console.log(data)
    },
    // 获取路由链接上拼接的token值
    getTokenInUrl() {
      var url = window.location.href;
      if (url.indexOf("token") > 0) {
        let getTokenParams = window.location.href.split("token=")[1];
        getTokenParams=getTokenParams.split("&")[0];
        if (getTokenParams.length >= 32) {
          getTokenParams = getTokenParams.substr(0, 32);
          sessionStorage.setItem("token", getTokenParams);
        }
      }
    },
  },
  mounted() {
    this.addFootId()
    this.$nextTick(() => {
      
    })
  },
  created() {
    // 设置token
    this.getTokenInUrl()
    // 获取屏幕状态栏高度
    this.phoneStatusBarHeight = window.phoneStatusBarHeight
    // 获取屏幕状态栏高度
    this.phoneStatusBarHeightNew = Number(this.phoneStatusBarHeight.split('px')[0])+Number(66)
    this.getDetailData()
    if (window.sessionStorage.getItem('token')) this.isStarCar()
    this.openInWX()
  }
}
</script>

<style lang="less">
.detail{
  .van-tabs__line{
    background-color: #FF571A;
  }
  .van-tab--active{
    font-size: 17px;
    font-weight: 550;
  }
  .detail_overlar{
    .van-overlay{
      background-color: black;
    }
  }
  .van-image{
    img{
      border-radius: 10px;
    }
  }
  .van-tabs--line .van-tabs__wrap{
    display: none;
  }
  .van-cell{
    font-size: 18px;
    padding: 2vh 0 ;
  }
  .van-field__label{
    color: black;
  }
  .van-cell__title{flex: 1;}
  .van-cell__value{flex: 2;}
}
</style>
<style scoped lang="less">
.detail{
  background-color: white;
  .title{
    // margin: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-left: 5px solid #FF571A;
    padding-left: 10px;
    font-size: 15px;
    color: #666;
    font-weight: 550;
  }
  .button_box{
    text-align: center;
    padding-top: 2vh;
    font-weight: 600;
    button{
      border: none;
      background-color: #FF571A;
      color: white;
      width: 100%;
      padding: 10px;
      border-radius: 50px;
    }
  }
  .popup_box{
    padding: 0 25px;
    font-size: 18px;
    .price_title{
      height: 13vh;
      text-align: center;
      border-bottom: 1px solid #F8F8F8;
      div:nth-child(1) {
        padding-top: 3vh;
      }
      div:nth-child(2) {
        padding-top: 1vh;
        color: #999;
      }
    }
    .price_address{
      display: flex;
      padding-top: 2vh;
      height: 9vh;
      border-bottom: 1px solid #F8F8F8;
      .consult{
        flex: 1;
      }
      .consult_address{
        padding-left: 8px;
        flex: 2;
        div:nth-child(2) {
          font-size: 16px;
          color: #999;
          margin-top: 1vh;
        }
      }
    }
    .user_name{
      border-bottom: 1px solid #F8F8F8;
    }
    .user_phone{
      border-bottom: 1px solid #F8F8F8;
    }
  }
  .finish_box{
    margin-top: 10vh;
    padding: 0 25px;
    text-align: center;
    .icon_box{
      font-size: 50px;
      color: rgb(95, 190, 95);
    }
    .finish_content{
      p:nth-child(1) {
        margin: 10px;
        font-weight: 550;
        font-size: 18px;
      }
      p:nth-child(2) {
        margin: 5px;
        color: #999;
      }
      P:nth-child(3) {
        color: #999;
      }
    }
  }
  .car_picture{
    margin: 16px;
    .picture{
      margin-bottom: 10px;
    }
  }
  .counselor{
    padding: 0 16px;
    display: flex;
    align-items: center;
    height: 66px;
    width: 100%;
    background-color: white;
    position: fixed;
    bottom: 0;
    .userimg{
      flex: 1;
      img{
        height: 50px;
        width: 50px;
        border-radius: 50%;
        // background-color: #FF571A;
      }
      
    }
    .userinfo{
      flex: 1;
      font-size: 14px;
      text-align: center;
      p:nth-child(1){
        padding-bottom: 5px;
      }
      p:nth-child(2){
        background-color: skyblue;
        color: white;
        padding: 5px;
      }
    }
    .userbut{
      flex: 3;
      text-align: center;
      .phone_but{
        border: 1px solid #FF571A;
        background-color: white;
        color: #FF571A;
        padding: 12px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 18px;
      }
    }
  }
  .blank{
    height: 66px;
    width: 100%;
  }
  .close{
    font-size: 25px;
    color: white;
    padding-left: 20px;
  }
  .show_photo{
    width: 100%;
    height: 40vh;
    margin-top: 18vh;
    background-color: white;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .phone{
    margin-top: 20px;
    text-align: center;
    span{
      background-color: #FF571A;
      padding: 10px 120px;
      border-radius: 50px;
      color: white;
      font-size: 18px;
      font-weight: 550;
      // border: 1px solid #FF571A;
    }
  }
  .download{
    height: 70px;
    width: 100%;
    background-color: white;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    .download_icon{
      text-align: center;
      flex: 1;
      img{
        width: 60px;
        height: 60px;
      }
    }
    .download_content{
      flex: 2;
      font-size: 14px;
      p:nth-child(1){
        font-size: 16px;
        font-weight: 550;
        margin-bottom: 7px;
      }
    }
    .download_but{
      flex: 1;
      text-align: center;
      span{
        padding: 5px 5px;
        background-color: #FFC303;
        border-radius: 50px;
      }
    }
  }
  .noMore{
    padding-bottom: 20px;
    text-align: center;
    font-size: 16px;
    color: #999;
  }
}
.normal_margin{
  border-bottom: 10px solid #F8F8F8;
}
</style> 